import { Button, StyleSheet, View } from 'react-native'
import Animated, { useAnimatedProps, useSharedValue, withSpring, withTiming } from 'react-native-reanimated'
import { Circle, Svg } from 'react-native-svg'

const AnimatedCircle = Animated.createAnimatedComponent(Circle)

export default function ReanimatedAnimatingPropsPage() {
  const r = useSharedValue<number>(20);

  const handlePlus = () => {
    r.value += 10;
  };
  const handleMinus = () => {
    r.value -= 10;
  };

  const animatedProps = useAnimatedProps(() => ({
    r: withTiming(r.value),
  }));

  return (
    <View style={styles.container}>
      <Svg style={styles.svg}>
        <AnimatedCircle
          cx="50%"
          cy="50%"
          fill="#b58df1"
          animatedProps={animatedProps}
        />
      </Svg>
      <Button onPress={handlePlus} title="+" />
      <Button onPress={handleMinus} title="-" />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    gap: 20,
  },
  svg: {
    width: 250,
    height: 250,
    backgroundColor: '#f8f9fa',
    borderRadius: 20,
  },
})
